<template>
  <view class="search-page" v-show="selectedOption">
    <view class="search-bar-wrapper">
      <input type="text" class="search-bar" ref="textInput" @input="handleInput" @focus="showOptions" @blur="hideOptions" v-model='keyword' placeholder="请输入搜索内容">
			
      <view class="search-icon" @click="serve">
        <image src="/static/搜索.png"  class="img">
      </view>
    </view>
		<view v-if="showDropdown" class="select">
			<view class="select_item" v-for="(item, index) in select" :key="index" @click="select1(item)">{{ item }}</view>
		</view>
		
		<view class="section-title">
			<text>热门搜索</text>
			<view class="toggle-icon" @click="clearSearchHistory">
		      <image class="img" src='../../../static/删除.png' />
		  </view>
		</view>
    <view class="section">
      
      <view class="search-history-wrapper">
        <view class="search-history-item" v-for="(item, index) in searchHistory" :key="index" @click="serve1(item)">
          {{ item }}
        </view>
      </view>
    </view>
		<view class="section-title">
			<text>周边搜索</text>
			<view class="toggle-icon" @click="toggleNearbySearch">
          <image class="img" :src="hideNearby ? '../../../static/show.png' : '../../../static/hide.png'" />
      </view>
		</view>
    <view class="section">
      
      <view class="nearby-search-wrapper">
        <view class="nearby-search-item" v-for="(item, index) in nearbySearch" :key="index" :class="{ hide: hideNearby }" @click="serve1(item)">
          <view>{{ item }}</view>
					<view class="txt">0{{index}}</view>
        </view>
        
      </view>
    </view>
  </view>
	
</template>

<script>
export default {
  data() {
    return {
			keyword: '',
      searchHistory: ['好看的植物','水杯','卫生纸','干垃圾'], // 用户搜索记录
      nearbySearch: ['垃圾分类','怎么识别垃圾种类','附近垃圾回收地点'],
      hideNearby: false, // 是否隐藏周边搜索
			select: ['垃圾分类','怎么识别垃圾种类','附近垃圾回收地点', '首页', '商城'  ,'拍照识别','订单','发现'],
			showDropdown: false,
			selectedOption: true
    };
  },
	
  methods: {
		handleInput(event) {
      // 处理输入框内容的变化
    },
    showOptions() {
      this.showDropdown = true; // 显示选项列表
    },
    select1(item) {
			this.keyword = item ;
			console.log(item);
      this.showDropdown = false; // 隐藏选项列表
			
    },
		hideOptions() {
		  this.showDropdown = false; // 隐藏选项列表
		},
    clearSearchHistory() {
      // 清空搜索记录
			uni.showModal({
			  title: '提示',
			  content: '是否清空选项？',
			  success: (res) => {
			    if (res.confirm) {
			    this.searchHistory = []; // 清空select数组
			      uni.showToast({
			        title: '已清空选项',
			        icon: 'none'
			      });
			    }
			  }
			});
    },
    toggleNearbySearch() {
      // 切换显示/隐藏周边搜索
			
      this.hideNearby = !this.hideNearby;
    },
		
		serve(){
			this.selectedOption = !this.selectedOption;
			if(this.keyword == '垃圾分类'){
				uni.navigateTo({
				  url: '../guide' // 替换成实际要跳转的页面路径
				});
			}else if(this.keyword == '怎么识别垃圾种类'){
				uni.navigateTo({
				  url: '../guide' // 替换成实际要跳转的页面路径
				});
			}else if(this.keyword == '附近垃圾回收地点'){
				
			}else if(this.keyword == '首页'){
				
			}else if(this.keyword == '商城'){
				
			}else if(this.keyword == '拍照识别'){
				
			}else if(this.keyword == '订单'){
				
			}else if(this.keyword == '发现'){
				
			}
		},
		serve1(item){
			console.log(item);
			this.keyword = item;
		},
		
		
  },
}
</script>

<style lang="scss" scoped>
.search-page {
	width:100vw;
	height:100vh;
  padding: 60rpx;
  color: #899989; 
	// background-color:#212121;
	background-color: #fff;
}

.search-bar-wrapper {
  display: flex;
	border-bottom:1px solid #000000;
  align-items: center;
  margin-bottom: 20px;
	padding:16rpx;
	.search-bar {
	  flex: 1;
	}
	
	.search-icon {
	  margin-left: 10px;
	  width: 40rpx;
	  height: 40rpx;
	  cursor: pointer;
		
		.img{
			width: 100%;
			height:100%;
		}
	}
}

.section-title {
	  font-weight: bold;
		font-size: 36rpx;
		color:#000000;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
		
		.toggle-icon {
		  width: 20px;
		  height: 20px;
		  cursor: pointer;
			padding-top: 20rpx;
			.img{
				width: 20px;
				height: 20px;
				
			}
		}
	}

.section {
  margin-bottom: 20px;
	
	.search-history-wrapper {
	  margin-top: 10px;
	  display: flex;
	  flex-wrap: wrap;
	}
	
	.search-history-item {
	  padding: 6px 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  margin-right: 10px;
	  margin-bottom: 10px;
	}
	.nearby-search-wrapper {
	  display: flex;
	  align-items: center;
		flex-direction: column;
	}
	
	.nearby-search-item {
		width: 100%;
	  display: flex;
		font-size: 32rpx;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding-bottom: 25rpx;
		border-bottom: 3rpx solid #ddd;
		.txt{
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	
	.hide {
	  display: none;
	}
}
.select{
	width:100%;
	position: absolute;
	left: 0rpx;
	background-color: #a5a5a5;
	z-index: 100;
	
	.select_item{
		// width: 1000rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin-top: 10rpx;
		padding-left: 20rpx;
		padding-bottom: 8rpx;
		border-bottom: 1px solid #ffffff;
	}
}
</style>